<template>
  <div class="post-detail-container">
    <!-- 顶部操作栏 -->
    <div class="action-bar">
      <button class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon> 返回
      </button>
      <div class="action-buttons">
        <button class="edit-btn" @click="goToAddPost">
          <el-icon><Edit /></el-icon> 我也要发
        </button>
      </div>
    </div>

    <!-- 帖子详情内容 -->
    <div class="content-wrapper">
      <!-- 左侧主要内容 -->
      <div class="main-content">
        <!-- 帖子标题 -->
        <div class="post-card">
          <h1 class="post-title">{{ post.title }}</h1>
          
          <!-- 帖子元信息 -->
          <div class="post-meta">
            <div class="author-info">
              <el-avatar :src="post.avatar" class="author-avatar" :size="36" />
              <div class="author-details">
                <span class="author-name">{{ post.author }}</span>
                <span class="post-time">{{ post.time }}</span>
              </div>
            </div>
            
            <!-- 交互按钮 -->
            <div class="post-actions">
              <div class="action-item" :class="{ liked: post.liked }" @click="toggleLike">
                <el-icon :size="20">
                  <svg v-if="!post.liked" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                  <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="#ff3860" stroke="#ff3860" stroke-width="2">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                </el-icon>
                <span class="action-text">{{ post.likes }}</span>
              </div>
              <div class="action-item" @click="viewComments">
                <el-icon :size="20"><ChatRound /></el-icon>
                <span class="action-text">{{ post.comments }}</span>
              </div>
              <div class="action-item" :class="{ favorited: post.favorited }" @click="toggleFavorite">
                <el-icon :size="20">
                  <svg v-if="!post.favorited" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                  <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="#ffc107" stroke="#ffc107" stroke-width="2">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                </el-icon>
                <span class="action-text">{{ post.favorites }}</span>
              </div>
              <div class="action-item" @click="sharePost">
                <el-icon :size="20"><Share /></el-icon>
                <span class="action-text">分享</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 帖子正文 -->
        <div class="post-card">
          <div class="post-content" v-html="post.contents"></div>
          
          <!-- 帖子图片 -->
          <div class="post-image-container" v-if="post.images && post.images.length">
            <el-image 
              :src="post.images[0]"
              alt="post image"
              class="post-image"
              lazy
              fit="cover"
            >
              <template #placeholder>
                <div class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </template>
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </div>

        <!-- 运动数据（如果是运动帖子） -->
        <div class="post-card" v-if="post.sportType">
          <div class="section-title">运动数据</div>
          <div class="sport-data-grid">
            <div class="sport-data-item" v-if="post.duration">
              <div class="data-label">时长</div>
              <div class="data-value">{{ post.duration }} 分钟</div>
            </div>
            <div class="sport-data-item" v-if="post.calories">
              <div class="data-label">消耗</div>
              <div class="data-value">{{ post.calories }} 卡路里</div>
            </div>
            <div class="sport-data-item" v-if="post.sportType">
              <div class="data-label">类型</div>
              <div class="data-value">{{ post.sportType }}</div>
            </div>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="post-card comments-section" ref="commentsSection">
          <div class="section-title">
  <el-icon><ChatRound /></el-icon>
  评论 ({{ post.comments }})
</div>
          <!-- 评论输入框 -->
          <div class="comment-input-area">
            <el-input
              v-model="newComment"
              type="textarea"
              placeholder="请输入您的评论..."
              :rows="3"
              class="comment-textarea"
            />
            <div class="comment-actions-bar">
              <el-button 
                type="primary" 
                @click="submitComment"
                :disabled="!newComment.trim()"
                class="submit-comment-btn"
              >
                发布评论
              </el-button>
            </div>
          </div>
          
          <div class="comments-container">
            <div 
              v-for="comment in comments" 
              :key="comment.id"
              class="comment-item"
              :class="{ 'is-author': comment.author === post.author }"
            >
              <div class="comment-header">
                <el-avatar :src="comment.avatar" class="comment-avatar" :size="36" />
                <div class="comment-author-info">
                  <div class="comment-author">
                    {{ comment.author }}
                    <span v-if="comment.author === post.author" class="author-badge">作者</span>
                  </div>
                  <div class="comment-time">{{ comment.time }}</div>
                </div>
                <div class="comment-like" :class="{ liked: comment.liked }" @click="likeComment(comment)">
                  <el-icon :size="16">
                    <svg v-if="!comment.liked" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    </svg>
                    <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="#ff3860" stroke="#ff3860" stroke-width="2">
                      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    </svg>
                  </el-icon>
                  <span class="like-count">{{ comment.likes }}</span>
                </div>
              </div>
              <div class="comment-content">{{ comment.content }}</div>
            </div>
            
            <!-- 无评论提示 -->
            <div class="no-comments" v-if="comments.length === 0 && !loadingComments">
              <el-icon><ChatRound /></el-icon>
              <p>暂无评论，快来抢沙发吧！</p>
            </div>
            
            <!-- 加载更多提示 -->
            <div class="load-more" v-if="hasMoreComments && comments.length > 0">
              <el-button @click="loadMoreComments" :loading="loadingComments" link>
                {{ loadingComments ? '加载中...' : '加载更多评论' }}
              </el-button>
            </div>
            <div class="no-more-comments" v-else-if="comments.length > 0 && !hasMoreComments">
              <el-icon><Bottom /></el-icon>
              <span>没有更多评论了</span>
            </div>
            
            <!-- 无限加载状态指示器 -->
            <div class="infinite-loading" v-show="loadingComments && currentPage > 1">
              <el-icon class="is-loading"><Loading /></el-icon>
              <span>正在加载更多评论...</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息 -->
      <div class="sidebar">
        <!-- 作者信息和安全守则容器 -->
        <div class="sidebar-sticky-container">
          <!-- 作者信息卡片 -->
          <div class="post-card author-card">
            <div class="section-title">作者信息</div>
            <div class="author-profile">
              <el-avatar :src="post.avatar" class="author-avatar-large" :size="50" />
              <div class="author-name-large">{{ post.author }}</div>
              <div class="author-bio">运动爱好者，分享健康生活</div>
              <div class="author-stats">
                <div class="stat">
                  <span class="stat-number">{{ authorStats.posts }}</span>
                  <span class="stat-label">帖子</span>
                </div>
                <div class="stat">
                  <span class="stat-number">{{ authorStats.followers }}</span>
                  <span class="stat-label">粉丝</span>
                </div>
                <div class="stat">
                  <span class="stat-number">{{ authorStats.likes }}</span>
                  <span class="stat-label">获赞</span>
                </div>
              </div>
              <button class="follow-btn">关注</button>
            </div>
          </div>

          <!-- 运动安全黄金守则 -->
          <div class="post-card safety-rules">
            <div class="section-title">运动安全黄金守则</div>
            <div class="safety-rules-content">
              <div 
                v-for="rule in safetyRules" 
                :key="rule.id"
                class="rule-item"
              >
                <div class="rule-number">{{ rule.number }}</div>
                <div class="rule-text">{{ rule.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, Edit, ChatRound, Share, Picture, Bottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 帖子数据
const post = ref({
  id: 1,
  title: '晨跑10公里，感受清晨的美好',
  author: '运动达人',
  avatar: '/src/assets/头像.jpg',
  time: '2023-05-15 08:30:00',
  views: 1240,
  likes: 42,
  comments: 8,
  favorites: 5,
  liked: false,
  favorited: false,
  content: '今天早上5点起床，完成了10公里的晨跑，感觉整个人都充满了活力。清晨的空气特别清新，推荐大家也尝试一下晨跑！',
  contents: '<p>今天早上5点起床，完成了10公里的晨跑，感觉整个人都充满了活力。清晨的空气特别清新，推荐大家也尝试一下晨跑！</p><p>跑步路线沿着河边的绿道，两边都是郁郁葱葱的树木，偶尔还能看到一些早起锻炼的老人和同样在跑步的朋友。</p><p>跑步过程中，我特别注意了呼吸节奏和步频控制，保持在每公里5分30秒的配速，心率维持在140-150之间，这是一个比较理想的有氧运动心率区间。</p>',
  images: [
    '/src/assets/跑道.jpg',
    '/src/assets/手表.jpg'
  ],
  sportType: '跑步',
  distance: 10.0,
  duration: 55,
  calories: 420
})

// 作者统计数据
const authorStats = reactive({
  posts: 24,
  followers: 128,
  likes: 542
})

// 评论数据
const comments = ref([])
const newComment = ref('')
const loadingComments = ref(false)
const hasMoreComments = ref(true)
const currentPage = ref(1)
const commentsSection = ref(null)
const observer = ref(null)

// 运动安全黄金守则
const safetyRules = ref([
  { id: 1, number: '1.', content: '运动前充分热身，避免肌肉拉伤' },
  { id: 2, number: '2.', content: '选择合适的运动装备，保护关节和身体' },
  { id: 3, number: '3.', content: '循序渐进增加运动强度，避免过度训练' },
  { id: 4, number: '4.', content: '保持充足水分补充，防止脱水' },
  { id: 5, number: '5.', content: '运动后进行拉伸放松，帮助肌肉恢复' },
  { id: 6, number: '6.', content: '注意运动环境安全，避免意外伤害' }
])

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 跳转到发帖页面
const goToAddPost = () => {
  router.push('/add-community')
}

// 切换点赞状态
const toggleLike = () => {
  post.value.liked = !post.value.liked
  post.value.likes += post.value.liked ? 1 : -1
}

// 查看评论
const viewComments = () => {
  ElMessage.info('查看评论')
  // 实际项目中这里会跳转到评论区域或打开评论面板
}

// 切换收藏状态
const toggleFavorite = () => {
  post.value.favorited = !post.value.favorited
  post.value.favorites += post.value.favorited ? 1 : -1
}

// 分享帖子
const sharePost = () => {
  ElMessage.info('分享帖子')
  // 实际项目中可以调用浏览器分享API或自定义分享功能
}

// 模拟加载评论
const loadComments = async (page = 1) => {
  if (page === 1) {
    comments.value = []
  }
  
  loadingComments.value = true
  
  // 模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 800))
  
  // 模拟评论数据
  const mockComments = []
  const startIndex = (page - 1) * 5
  for (let i = 0; i < 5; i++) {
    const index = startIndex + i + 1
    // 让第一条评论成为作者评论
    const isAuthor = index % 6 === 1;
    mockComments.push({
      id: index,
      author: isAuthor ? post.value.author : `用户${index}`,
      avatar: '/src/assets/头像.jpg',
      time: `2023-05-${15 + page}-${(i * 10) % 60}`,
      content: isAuthor 
        ? `这是我的第${index}条评论，感谢大家的关注！希望我的分享对大家有帮助。` 
        : `这是第${index}条评论内容，用户分享了关于运动的一些心得体会和感受。`,
      likes: Math.floor(Math.random() * 50),
      liked: false
    })
  }
  
  if (page === 1) {
    comments.value = mockComments
  } else {
    comments.value = [...comments.value, ...mockComments]
  }
  
  // 模拟没有更多数据
  if (page >= 3) {
    hasMoreComments.value = false
  }
  
  // 更新帖子评论数
  if (page === 1) {
    post.value.comments = mockComments.length
  } else {
    post.value.comments += mockComments.length
  }
  
  loadingComments.value = false
}

// 加载更多评论
const loadMoreComments = () => {
  if (!hasMoreComments.value || loadingComments.value) return
  
  currentPage.value++
  loadComments(currentPage.value)
}

// 提交评论
const submitComment = () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('评论内容不能为空')
    return
  }
  
  const comment = {
    id: comments.value.length + 1,
    author: '我',
    avatar: '/src/assets/头像.jpg',
    time: new Date().toLocaleString('zh-CN', { 
      year: 'numeric', 
      month: '2-digit', 
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }),
    content: newComment.value,
    likes: 0,
    liked: false
  }
  
  // 如果当前用户是帖子作者，添加作者标识
  if (post.value.author === '我') {
    comment.isAuthor = true;
  }
  
  comments.value.unshift(comment)
  newComment.value = ''
  
  // 更新帖子评论数
  post.value.comments++
  
  ElMessage.success('评论发表成功')
}

// 点赞评论
const likeComment = (comment) => {
  const wasLiked = comment.liked
  comment.liked = !comment.liked
  comment.likes += comment.liked ? 1 : -1
  
  // 如果是用户自己的评论，更新帖子总评论数
  if (!wasLiked && comment.author === '我') {
    post.value.comments += comment.liked ? 1 : -1
  }
}



// 组件挂载时加载评论
onMounted(() => {
  loadComments()
  // 初始化交叉观察器以实现无限滚动
  initIntersectionObserver()
})

// 初始化交叉观察器以实现无限滚动
const initIntersectionObserver = () => {
  nextTick(() => {
    const options = {
      root: commentsSection.value,
      rootMargin: '0px',
      threshold: 0.1
    }
    
    observer.value = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && hasMoreComments.value && !loadingComments.value) {
        loadMoreComments()
      }
    }, options)
    
    const loadMoreTrigger = document.querySelector('.load-more')
    if (loadMoreTrigger) {
      observer.value.observe(loadMoreTrigger)
    }
  })
}

// 组件销毁前断开观察器
// onUnmounted(() => {
//   if (observer.value) {
//     observer.value.disconnect()
//   }
// })

</script>

<style scoped>
.post-detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 30px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 操作栏样式 */
.action-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  margin-bottom: 25px;
  gap: 15px;
}

.back-btn, .edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-weight: 500;
  border-radius: 10px;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.back-btn {
  color: #27AE60;
  background: #fff;
  border: 1px solid #27AE60;
}

.back-btn:hover {
  background: #f0f9f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.edit-btn {
  color: #fff;
  background: linear-gradient(135deg, #27AE60, #66bb6a);
  border: none;
}

.edit-btn:hover {
  background: linear-gradient(135deg, #219653, #4caf50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

/* 内容区域布局 */
.content-wrapper {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 25px;
}

.main-content, .sidebar {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 卡片通用样式 */
.post-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 25px;
  border: 1px solid #eee;
  transition: all 0.3s ease;
  overflow: hidden;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(39, 174, 96, 0.25);
}

.section-title {
  height: 35px;
  font-size: 1.2rem;
  color: #27AE60;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  height: 22px;
  width: 4px;
  background: #27AE60;
  border-radius: 2px;
}

/* 帖子标题 */
.post-title {
  font-size: 1.9rem;
  color: #333;
  margin: 0 0 20px 0;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

/* 帖子元信息 */
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border: 2px solid #e0e0e0;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.author-name {
  font-weight: 600;
  color: #27AE60;
  font-size: 1.1rem;
}

.post-time {
  font-size: 0.9rem;
  color: #888;
}

/* 帖子交互按钮 */
.post-actions {
  display: flex;
  gap: 25px;
  justify-content: flex-end;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 1rem;
  padding: 8px 15px;
  border-radius: 10px;
}

.action-item:hover {
  color: #27AE60;
  background-color: #f0f9f0;
  transform: translateY(-2px);
}

.action-item.liked {
  color: #ff3860;
}

.action-item.favorited {
  color: #ffc107;
}

/* 帖子正文内容 */
.post-content {
  line-height: 1.9;
  font-size: 1.05rem;
  color: #444;
  margin: 25px 0;
  padding: 10px 0;
}

.post-content :deep(p) {
  margin: 0 0 20px 0;
  line-height: 1.9;
}

.post-content :deep(img) {
  max-width: 100%;
  border-radius: 12px;
  margin: 15px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 帖子图片 */
.post-image {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
  font-size: 16px;
  border-radius: 12px;
}

.image-slot .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

@keyframes dot {
  33% { content: '.' }
  66% { content: '..' }
  100% { content: '...' }
}

/* 运动数据网格 */
.sport-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.sport-data-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 15px;
  background: linear-gradient(135deg, #f0f9f0, #e8f5e9);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.sport-data-item:hover {
  transform: translateY(-3px);
}

.data-label {
  font-weight: 500;
  color: #666;
  font-size: 0.9rem;
}

.data-value {
  font-weight: 700;
  color: #27AE60;
  font-size: 1.1rem;
}

/* 作者卡片 */
.author-card {
  text-align: center;
  position: relative;
  top: 0;
}

.author-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.author-avatar-large {
  width: 60px;
  height: 60px;
  border: 3px solid #e0e0e0;
  margin: 10px 0;
}

.author-name-large {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.author-bio {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 10px 0;
  padding: 15px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-number {
  font-weight: 700;
  color: #27AE60;
  font-size: 1.2rem;
}

.stat-label {
  font-size: 0.8rem;
  color: #888;
}

.follow-btn {
  background: linear-gradient(135deg, #27AE60, #66bb6a);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.follow-btn:hover {
  background: linear-gradient(135deg, #219653, #4caf50);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(39, 174, 96, 0.4);
}

/* 相关推荐 */
.related-posts {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: sticky;
  top: 150px;
}

.related-post-item {
  padding: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eee;
  background: #fafafa;
}

.related-post-item:hover {
  background-color: #f0f9f0;
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.related-post-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.related-post-meta {
  display: flex;
  gap: 15px;
  font-size: 0.8rem;
  color: #888;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 帖子图片容器 */
.post-image-container {
  text-align: center;
  margin-top: 25px;
  padding: 15px 0;
}

.post-image {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

/* 评论区样式 */
.comments-section {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 25px;
  border: 1px solid #eee;
  transition: all 0.3s ease;
  overflow: hidden;
}

.comment-input-area {
  padding-bottom: 25px;
  border-bottom: 1px solid #eee;
  margin-bottom: 25px;
}

.comment-input-area .el-textarea {
  margin-bottom: 15px;
}

.comment-input-area .el-textarea :deep(.el-textarea__inner) {
  border-radius: 12px;
  padding: 15px;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.comment-input-area .el-textarea :deep(.el-textarea__inner:focus) {
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
  border-color: #27AE60;
}

.comment-textarea {
  margin-bottom: 15px;
}

.comment-actions-bar {
  display: flex;
  justify-content: flex-end;
}

.submit-comment-btn {
  background: linear-gradient(135deg, #27AE60, #66bb6a);
  border: none;
  color: white;
  padding: 10px 28px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.submit-comment-btn:hover {
  background: linear-gradient(135deg, #219653, #4caf50);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(39, 174, 96, 0.4);
}

.submit-comment-btn:active {
  transform: translateY(0);
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-item:hover {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
}

.comment-item.is-author {
  border-left: 3px solid #27AE60;
  background-color: #f0f9f0;
}

.comment-item.is-author:hover {
  background-color: #e8f5e9;
}

.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
}

.comment-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-author {
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-badge {
  background: #27AE60;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.comment-time {
  font-size: 0.8rem;
  color: #999;
}

.comment-content {
  margin: 12px 0 15px 48px;
  line-height: 1.7;
  color: #444;
  font-size: 1rem;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.comment-item:hover .comment-content {
  background-color: #f0f0f0;
}

.comment-item.is-author .comment-content {
  background-color: #e1f5e1;
  border-left: 3px solid #27AE60;
}

.comment-item.is-author:hover .comment-content {
  background-color: #d0f0d0;
}

.comment-like {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #999;
  font-size: 0.85rem;
  background-color: #f5f5f5;
}

.comment-like:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

.comment-like.liked {
  color: #ff3860;
  background-color: #fff5f7;
  box-shadow: 0 2px 6px rgba(255, 56, 96, 0.2);
}

.comment-like svg {
  transition: all 0.3s ease;
}

.load-more, .no-more-comments, .no-comments {
  text-align: center;
  padding: 20px 0;
  color: #666;
}

.load-more button {
  background: #f5f5f5;
  border: none;
  color: #666;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.load-more button:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.infinite-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 15px;
  color: #27AE60;
  font-size: 0.9rem;
}

.no-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #999;
}

.no-comments p {
  margin: 0;
}

.no-more-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.9rem;
  color: #999;
}

/* 侧边栏固定容器 */
.sidebar-sticky-container {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 运动安全黄金守则 */
.safety-rules {
  position: relative;
  top: 0;
}

.safety-rules-content {
  background: linear-gradient(135deg, #e8f5e9 0%, #f0f9f0 100%);
  border-radius: 12px;
  padding: 20px;
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px dashed #d0e5d0;
}

.rule-item:last-child {
  border-bottom: none;
}

.rule-number {
  font-weight: 700;
  color: #27AE60;
  min-width: 24px;
  background: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

.rule-text {
  color: #333;
  line-height: 1.6;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
    flex-direction: row;
    gap: 25px;
  }
  
  .author-card, .safety-rules {
    width: 50%;
    flex: 1;
  }
  
  .author-card {
    top: 0;
  }
  
  .safety-rules {
    top: 0;
  }
}

@media (max-width: 768px) {
  .post-detail-container {
    padding: 15px;
  }
  
  .action-bar {
    flex-direction: column;
  }
  
  .post-title {
    font-size: 1.5rem;
  }
  
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .post-actions {
    width: 100%;
    justify-content: space-around;
  }
  
  .post-content {
    font-size: 1rem;
  }
  
  .post-images {
    grid-template-columns: 1fr;
  }
  
  .sport-data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sidebar {
    flex-direction: column;
  }
  
  .author-card, .safety-rules {
    width: 100%;
  
}}
</style>